<!--
  Generated template for the TihuoPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
	<ion-navbar>
		<button ion-button menuToggle>
			<ion-icon name="menu"></ion-icon>
		</button>
		<ion-title>我的提货</ion-title>
	</ion-navbar>
	<div>
		<ion-segment [(ngModel)]="pet" class="tihuo-viewpage" (click)="swipeEvnet($event)">
			<ion-segment-button value="kittens" id="kittens">
				充值卡
			</ion-segment-button>
			<ion-segment-button value="puppies" id="puppies">
				购物卡
			</ion-segment-button>
    
		</ion-segment>
	</div>
</ion-header>

<ion-content>
	

	<div class="card-list">
		<ion-slides (ionSlideWillChange)="slideChanged($event)">
			<ion-slide>
				<div *ngIf="data == 0" class="null">
					<img src="./assets/imgs/nothing.png" alt="">
					<span>哇哦,篮子暂时是空的~</span>
				</div>
				<div *ngIf="data == 1" class="order-info">
					<div *ngIf="currentIndex != 0">
						<div class="loading">
							<ion-spinner item-start name="dots"></ion-spinner>
						</div>
						
					</div>
					<div *ngIf="currentIndex == 0">
						<div class="order" *ngFor="let item of dataList">
							<div class="state-title">
								<span>编号:{{item.express_code}}</span>
								<span>{{item.time}}</span>
							</div>
							<div class="goods-info">
								<div class="goods-img">
									<img src="{{item.goods_image}}" alt="">
								</div>
								<div class="goods-title">
									<div class="title">
										<span>{{item.goods_name}} </span>
										<span>{{item.tihuo_status}}</span>
									</div>
									<div class="price">
										<div class="quantity">
											<span>数量:{{item.goods_num}}</span>
											<span [style.color]="item.card_status == '已充值' ? '#008000' : '#ff0000'" >{{item.card_status}}</span>
										</div>
									</div>
								</div>
							</div>
							<div class="order-id">
								<div class="bottom-info">
									<div class="phone">
										<!-- <img src="../../assets/imgs/phone.png" alt=""> -->
										<ion-icon name="phone-portrait"></ion-icon>
										<!-- <span>充值手机号:</span> -->
										<span>{{item.mob_phone}}</span>
									</div>
									<div class="total-price">
										<span>合计:￥{{item.heji}}</span>
									</div>
								</div>
							</div>
						</div>
					</div>
					
				</div>
				<ion-infinite-scroll (ionInfinite)="doInfinite($event)" class="home-loading">
					<ion-infinite-scroll-content loadingSpinner="crescent" loadingText="数据加载中">
					</ion-infinite-scroll-content>
				</ion-infinite-scroll>
			</ion-slide>

			<ion-slide>
				<div *ngIf="data == 0" class="null">
					<img src="./assets/imgs/nothing.png" alt="">
					<span>哇哦,篮子暂时是空的~</span>
				</div>
				<div *ngIf="data == 1" class="order-info">
					<div *ngIf="currentIndex != 1">
						<div class="loading">
							<ion-spinner item-start name="dots"></ion-spinner>
						</div>
					</div>
					<div *ngIf="currentIndex == 1">
						<div  class="order" *ngFor="let item of cardList">
							<div class="state-title">
								<span>编号:{{item.express_code}}</span>
								<span>{{item.time}}</span>
							</div>
							<div class="goods-info">
								<div class="goods-img">
									<img src="{{item.goods_image}}" alt="">
								</div>
								<div class="goods-title">
									<div class="title">
										<span>{{item.goods_name}} </span>
										<span>{{item.tihuo_status}}</span>
									</div>
									<div class="price">
										<div class="quantity">
											<span>数量:{{item.goods_num}}</span>
											<span >{{item.card_status}}</span>
										</div>
									</div>
								</div>
							</div>
							<!-- <div class="order-id">
								<div>
									<img src="./assets/imgs/position2.png" alt="">&nbsp;&nbsp;
									<span>{{item.true_name}} {{item.mob_phone}}</span>
								</div>
								<div>
									<span>{{item.area_info}} {{item.address}}</span>
								</div>
								
							</div> -->
							<div class="express" *ngIf="item.card_status != '待发货'">
								<span>
									快递单号:{{item.tihuo_code}}
								</span>
								<span>
									(京东)
								</span>
							</div>
						</div>
					</div>
					
				</div>
				<ion-infinite-scroll (ionInfinite)="doInfinite($event)" class="home-loading">
					<ion-infinite-scroll-content loadingSpinner="crescent" loadingText="数据加载中">
					</ion-infinite-scroll-content>
				</ion-infinite-scroll>
			</ion-slide>

			
		</ion-slides>
	</div>
</ion-content>

